<template>
  <div class="dswd-home">
    <div v-if="device==='desktop'" class="dswd-container">
      <first />
      <second />
      <three />
      <fourth />
      <five />
      <div class="toolbar">
        <div class="toolbar-item toolbar-item-weixin" @mouseover="showWeixin = true" @mouseleave="showWeixin = false">
          <div v-show="showWeixin" class="toolbar-layer" />
        </div>
        <div class="toolbar-item toolbar-item-message" @mouseover="showMessage = true" @mouseleave="showMessage = false">
          <div v-show="showMessage" class="toolbar-layer">
            <p>
              客服电话<br>
              13598895817
            </p>
          </div>
        </div>
      </div>
      <!-- <sixth /> -->
    </div>
    <div v-if="device==='mobile'||device==='ipad'" class="dswd-m-container">
      <first />
      <second />
      <three />
      <fourth />
      <five />
      <div class="toolbar">
        <div class="toolbar-item toolbar-item-weixin" @click="ShowWeixin()">
          <div v-show="mShowWeixin" class="toolbar-layer" />
        </div>
        <div class="toolbar-item toolbar-item-message" @click="ShowMessage()">
          <div v-show="mShowMessage" class="toolbar-layer">
            <p>
              客服电话<br>
              13598895817
            </p>
          </div>
        </div>
      </div>
      <!-- <sixth /> -->
    </div>
  </div>
</template>

<script>
import first from './first'
import second from './second'
import three from './three'
import fourth from './fourth'
import five from './five'
import { mapState } from 'vuex'
export default {
  components: { first, second, three, fourth, five },
  data() {
    return {
      showWeixin: false,
      showMessage: false,
      mShowWeixin: false,
      mShowMessage: false
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  methods: {
    ShowWeixin() {
      this.mShowWeixin = !this.mShowWeixin
      this.mShowMessage = false
    },
    ShowMessage() {
      this.mShowMessage = !this.mShowMessage
      this.mShowWeixin = false
    }
  }
}
</script>

<style lang="scss">
.dswd-home{
  padding-top: 100px;
}
</style>
